<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="个人资料" />
    <el-descriptions :column="2" size="medium" border :label-style="{width:'25%'}" :content-style="{width:'25%'}">
      <el-descriptions-item label="工号">
        {{ user.account }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ user.name }}
      </el-descriptions-item>
      <el-descriptions-item label="院系">
        {{ user.deptName }}
      </el-descriptions-item>
      <el-descriptions-item label="权限">
        {{ user.roles }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      user: {
        account: '',
        name: '',
        deptName: '',
        roles: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'uid',
      'roles',
      'name',
      'deptName',
      'account'
    ])
  },
  created() {
    this.user.account = this.account
    this.user.name = this.name
    this.user.deptName = this.deptName
    this.user.roles = this.roles.join(', ')
  }
}
</script>
